<template>
  <div class="su">
    <ul class="top">
      <li>
        <div @click="tables"><img src="../../static/image/libi.png"
               alt=""></div>
        <div @click="routerback"></div>
        <div @click="nextClick('equipitem')"><img src="../../static/image/homs.png"
               alt=""></div>

      </li>
    </ul>
    <div class="flexBoxBG cube"
         v-show="bg"
         v-bind:class="{csip:datemg,uncsip:undatemg}"
         @click.stop="hideClick"></div>
    <div class="trans"
         v-bind:class="{csip:datemg,uncsip:undatemg}"></div>
    <div class="pos"
         v-bind:class="{csip:datemg,uncsip:undatemg}">
      <div @click.stop="nextClick2('hourstate')">
        <span class="three"><img src="../../static/image/xiang.png"
               alt=""></span>
        <span class="lastpos">设备详情</span>
      </div>
      <div @click.stop="nextClick('mapshow')">
        <span class="c four"><img src="../../static/image/app.png"
               alt=""></span>
        <span class="lastpos">周边设备</span>
      </div>
      <div @click.stop="nextClick('homepage')">
        <span class="three"><img src="../../static/image/tongji.png"
               alt=""></span>
        <span class="lastpos">地图展示</span>
      </div>
      <div class="last" @click="nextClick('waters')">
                <span class="two"><img src="../../static/image/lishi.png" alt=""></span>
                <span class="lastpos">历史记录</span>
            </div>
    </div>
    <div class="item">
      <p class="time">选择时间范围</p>
      <div class="flee">
        <div @click="timeClick1()">{{htime}}</div>
        <img src="../../static/image/arrow.png"
             alt="">
        <div @click="timeClick()">{{wtime}}</div>
        <calendar v-model="calendarShow"
                  @change="handelChange">
        </calendar>

        <calendar v-model="calendarShow1"
                  @change="handelChange1">
        </calendar>
      </div>
    </div>
    <div class="statistics">
      <div id="main"></div>
      <!-- <div id="bar"></div> -->
    </div>

    <div v-if="block"
         id="popup">
      <div class="popupBox">
        <p v-if="timeend==1">设备暂无数据</p>
        <p v-if="timeend==0">结束时间不能早于开始时间</p>
        <p @click="nextq">确定</p>
      </div>
    </div>
    <div class="load"
         v-if="load">
      <img src="../../static/image/loading.gif"
           alt="">
    </div>
  </div>
</template>

<script>
import Qs from 'qs'
import axios from 'axios'
import Picker from 'better-picker'
var echarts = require('echarts/lib/echarts');// 引入 ECharts 主模块

export default {
  name: 'mapShow',
  data () {
    return {
      calendarShow: false,
      calendarShow1: false,
      timeend: '',
      photo: true,
      show: false,
      datemg: false,
      undatemg: true,
      load: false,
      bg: '',
      end: [],
      datt: [],
      wtime: '',
      htime: '',
      jointime: '',
      joinhtime: '',
      devvol: [],
      devVOL: [],
      devWarning: [],
      devStatus: [],
      block: false,
      bone: 0,
      series4: [],
      xAxis3: [],
      series41: [],
      xAxis31: [],
      series42: [],
      xAxis32: [],

    }
  },
  mounted: function () {
    let month = '';
    document.title = this.$route.meta.title;
    this.htime = this.common.getNowFormatDatenew().slice(0, 10)
    this.wtime = this.common.getNowFormatDate().slice(0, 10)
    let that = this
    let data = {
      devId: that.$route.query.id,
      end: that.wtime + 'T23:59:00',
      start: that.htime + 'T00:00:00',
      datastreamIds:'2007',
      limit:6000
    }
    that.load = true;
    that.$axios
      .post(
        that.httpUrl + "Datapoints/getHistoryData",
        that.$qs.stringify(data)
      )
      .then(res => {
        that.load = false;
        // console.log(res);
        let mesg=JSON.parse((res.data.errMsg).slice(6))
        console.log(mesg);
        if(mesg.errno==0){
          console.log(11)
          for (let i = 0; i < mesg.data.datastreams[0].datapoints.length; i++) {
            console.log(mesg.data.datastreams[0].datapoints[i].value)
              that.xAxis3.push(mesg.data.datastreams[0].datapoints[i].at.slice(0, 10));
              that.series4.push(mesg.data.datastreams[0].datapoints[i].value);
          }
          let dataval = that.xAxis3
          let seriesdata = that.series4
          that.draw(dataval, seriesdata)
        } else {
          that.load = false;
          // that.block = true;
          that.timeend = 1
        }
      }).catch(err => {
        that.load = false;
        // that.block = true;
        that.timeend = 1
      })
    // let dataval = that.series4
    // let seriesdata = that.xAxis3
    // that.draw(dataval, seriesdata)
  },
  methods: {
    handelChange1 (val) {
      this.htime = this.formatDate(val).slice(0, 10)
      if (new Date(this.htime).getTime() > new Date(this.wtime).getTime()) {
        console.log(99)
        this.block = false
        this.timeend = 0;
        return false;
      }
      let that = this
      let data = {
        devId: that.$route.query.id,
        end: that.wtime + 'T23:59:00',
        start: that.htime + 'T00:00:00',
        datastreamIds:'2007',
        limit:6000
      }
      that.load = true;
      that.$axios
        .post(
          that.httpUrl + "Datapoints/getHistoryData",
          that.$qs.stringify(data)
        )
        .then(res => {
          console.log(res);
          that.load = false;
        // console.log(res);
        let mesg=JSON.parse((res.data.errMsg).slice(6))
        console.log(mesg);
        if(mesg.errno==0){
          console.log(11)
          that.xAxis3=[];
          that.series4=[];
          for (let i = 0; i < mesg.data.datastreams[0].datapoints.length; i++) {
            console.log(mesg.data.datastreams[0].datapoints[i].value)
              that.xAxis3.push(mesg.data.datastreams[0].datapoints[i].at.slice(0, 10));
              that.series4.push(mesg.data.datastreams[0].datapoints[i].value);
          }
          let dataval = that.xAxis3
          let seriesdata = that.series4
          that.draw(dataval, seriesdata)
          } else {
            that.load = false;
            that.block = false
            that.timeend = 1
          }
        }).catch(err => {
          that.load = false;
          that.block = false
          that.timeend = 1
        })
      // let dataval = that.xAxis31
      // let seriesdata = that.series41
      // that.draw(dataval, seriesdata)
    },
    handelChange (val) {
      this.wtime = this.formatDate(val).slice(0, 10)
      if (new Date(this.htime).getTime() > new Date(this.wtime).getTime()) {
        console.log(22)
        this.block = false
        this.timeend = 0
        return false;

      }
      let that = this
      let data = {
        devId: that.$route.query.id,
        end: that.wtime + 'T23:59:00',
        start:that.htime + 'T00:00:00',
        datastreamIds:'2007',
        limit:6000
      }
      that.load = true;
      that.$axios
        .post(
          that.httpUrl + "Datapoints/getHistoryData",
          that.$qs.stringify(data)
        )
        .then(res => {
          that.load = false;
        // console.log(res);
        let mesg=JSON.parse((res.data.errMsg).slice(6))
        console.log(mesg);
        if(mesg.errno==0){
          console.log(11);
          that.xAxis3=[];
          that.series4=[];
          for (let i = 0; i < mesg.data.datastreams[0].datapoints.length; i++) {
            console.log(mesg.data.datastreams[0].datapoints[i].value)
              that.xAxis3.push(mesg.data.datastreams[0].datapoints[i].at.slice(0, 10));
              that.series4.push(mesg.data.datastreams[0].datapoints[i].value);
          }
          let dataval = that.xAxis3
          let seriesdata = that.series4
          that.draw(dataval, seriesdata)
          } else {
            that.load = false;
            that.block = false
            that.timeend = 1
          }
        }).catch(err => {
          that.load = false;
          that.block = false
          that.timeend = 1
        })
    },
     nextClick (next) {
      this.$router.push({ path: '/' + next, query: { id: this.$route.query.id, sn: this.$route.query.sn, mark: this.$route.query.mark, address: this.$route.query.address,type:true} });
    },
    nextClick2 (next) {
      if((this.$route.query.sn).substr(0,2)=='03'){
        this.$router.push({ path: '/hourstate3', query: { id: this.$route.query.id, sn: this.$route.query.sn, mark: this.$route.query.mark, address: this.$route.query.address,type:true} })
      }else{
        this.$router.push({ path: '/hourstate', query: { id: this.$route.query.id, sn: this.$route.query.sn, mark: this.$route.query.mark, address: this.$route.query.address,type:true} })
      }
    },
    head () {
      this.photo = !this.photo;
    },
    tables () {
      this.datemg = true;
      this.undatemg = false;
      this.bg = true;
    },
    timeClick () {
      this.calendarShow1 = true;
    },
    hideClick () {
      this.po = false
      let that = this;
      that.datemg = false;
      that.undatemg = true;
      let t = setTimeout(function () {
        that.bg = false;
        clearTimeout(t)
      }, 250)
    },
    timeClick1 () {
      this.calendarShow = true;
    },
    nextq () {
      this.block = true;
    },
    formatDate (date) {
      const y = date.getFullYear()
      let m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      let d = date.getDate()
      d = d < 10 ? ('0' + d) : d
      let h = date.getHours()
      h = h < 10 ? ('0' + h) : h
      let min = date.getMinutes()
      min = min < 10 ? ('0' + min) : min
      let s = date.getSeconds()
      s = s < 10 ? ('0' + s) : s
      return y + '-' + m + '-' + d + ' '
    },
    routerback: function () {
      this.$router.back(-1)
    },
    draw (dataval, seriesdata) {
      // console.log(dataval);
      var myChart = echarts.init(document.getElementById('main'));// 基于准备好的dom，初始化echarts实例
      myChart.setOption({
        title: {
          text: '最近六个月用水记录',
          left: 'center',
          padding: [15, 0, 12, 0],
          textStyle: {
            fontSize: 15,
            fontStyle: 'bold',
            fontFamily: 'PingFang-SC-regula',
            color: '#303030',
          }
        },
        subtext: {},
        xAxis: {
          min: 0,
          max: 5,
          boundaryGap: false,
          data: dataval,
          axisLine: {
            lineStyle: {
              color: '#f3f3f3',
              width: 1
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#f3f3f3'],
              width: 1,
              type: 'solid'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#303030',//坐标值得具体的颜色
              fontSize: 12,
              fontFamily: 'PingFang-SC-regular'
            }
          }
        },
        yAxis: {
          min: 0,
          max: 300,
          splitNumber: 3,
          name: '单位: 吨',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#f3f3f3'],
              width: 1,
              type: 'solid'
            }
          }
        },
        grid: {
          left: '4%',
          right: '4%',
          bottom: '7%',
          top: '20%',
          containLabel: true
        },
        series: [{
          data: seriesdata,
          type: 'line',
          areaStyle: {            normal: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#a2c9fd' },
                  { offset: 1, color: '#fff' }
                ]
              )
            }          },
          smooth: true,
          symbol: 'circle',
          itemStyle: {
            normal: {
              color: "#4896ff",
              lineStyle: {
                color: "#4896ff"
              }
            }
          }
        }]
      })
    }
  }
}
</script>

<style scoped>
#main,
#bar {
  border-radius: 10px;
  background: #fff;
  margin: 0 auto;
  width: 690px;
  height: 570px;
}
.statistics {
  height: 539px;
}
#main {
  margin-top: 30px;
  margin-bottom: 44px;
}
.su {
  width: 100%;
  height: 100%;
  position: relative;
}
.top {
  height: 92px !important;
  background: #fff;
}
.top li {
  display: flex;
  justify-content: space-between;
  border-bottom: none !important;
}
.top li div:nth-child(1) {
  width: 36px;
  height: 28px;
}
.top li div:nth-child(2) {
  width: 1px;
  height: 1px;
  margin-right: 30px;
  z-index: -20;
}
.top li div:nth-child(3) {
  width: 49px;
  height: 40px;
  margin-right: 30px;
}
.top li div img {
  width: 100%;
  height: 100%;
  vertical-align: middle;
}
.top li {
  height: 89px;
}
ul {
  height: 712px;
  background: rgb(63, 58, 58);
}
ul li {
  height: 100px;
  background: #fff;
  line-height: 100px;
  text-align: left;
  margin-left: 38px;
  font-size: 30px;
  font-family: 'PingFang-SC-regular';
  color: #303030;
}
#allmap {
  width: 100%;
  height: 93% !important;
}
.photo {
  position: absolute;
  width: 94%;
  height: 35%;
  bottom: 0;
  margin: 0 3%;
  background: #fff;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  box-shadow: 0 0 10px #999;
}
.photo .head {
  width: 80px;
  height: 10px;
  margin: 20px auto;
  border-radius: 5px;
  background: #cecece;
}
.photo div {
  width: 96%;
  margin: 0 auto;
  font-size: 30px;
  font-family: '微软雅黑';
  line-height: 55px;
}
.photo div span:nth-child(2),
.status {
  color: #7c7c7c;
}
.photo .first {
  display: flex;
  justify-content: space-between;
}
.photo .first span:nth-child(3) {
  margin-right: 10%;
}
.photo div span:nth-child(1) {
  color: #bfbfbf;
}
.hello {
  background: #f2f2f2;
}
.su .time {
  font-size: 20px;
  font-family: 'PingFang-SC-regular';
  padding-top: 18px;
  margin-left: 30px;
  margin-bottom: 28px;
  color: #787878;
}
.su .flee {
  display: flex;
  justify-content: space-between;
  width: 80%;
  margin: 0 auto;
}
.flee div {
  height: 28px;
  line-height: 28px;
  font-size: 32px;
  color: #303030;
  width: 188px;
  height: 28px;
}
.su .item {
  height: 120px;
  width: 100%;
  background: #fff;
  margin-bottom: 30px;
}
.active {
  text-align: center;
  margin-top: 20px;
  font-size: 30px;
  font-family: '微软雅黑';
  color: #929293;
}
.pos {
  width: 227px;
  border-radius: 10px;
  position: fixed;
  left: 20px;
  z-index: 99999;
  top: 90px;
  overflow: hidden;
  background: rgba(40, 40, 41, 0.9);
}
.pos div {
  width: 210px;
  height: 80px;
  line-height: 86px;
  border-bottom: 1px solid #5b5a5d;
  margin: 0 auto;
  color: #fff;
  font-size: 20px;
  margin-left: 16px;
}
.pos div span:nth-child(1) {
  width: 40px;
  height: 40px;
  display: inline-block;
  margin-right: 30px;
}
.pos div span img {
  width: 100%;
  height: 100%;
  vertical-align: middle;
  margin-bottom: 10px;
  margin-left: 2px;
}
.last {
  border-bottom: none !important;
}
/* .two{width: 32px!important;height: 46px!important;display: inline-block;} */
.lasts {
  width: 36px !important;
  height: 35px !important;
  display: inline-block;
}
.trans {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 12px solid #282829;
  position: absolute;
  top: 78px;
  left: 48px;
}
.statu {
  margin-right: 0% !important;
  margin-left: 10%;
}
.hello .bottomchild span:nth-child(1) {
  width: 40px;
  height: 40px;
  display: inline-block;
}
.hello .bottomchild span:nth-child(1) img {
  width: 100%;
  height: 100%;
  vertical-align: middle;
  margin-bottom: 10px;
}
.hello .bottomchild span:nth-child(2) {
  display: inline-block;
  line-height: 60px;
  font-weight: bold;
  padding-left: 8px;
}
/* #popup{width: 100%;height: 40%;background-color: rgba(0,0,0,0.5);position: absolute;left: 0;top: 0;} */
.popupBox {
  width: 70%;
  background-color: #ffffff;
  text-align: center;
  margin: 40% 15%;
  border-radius: 20px;
}
#popup {
  width: 100%;
  height: 100%;
  background: rgba(108, 108, 108, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.popupBox p {
  font-size: 32px;
  color: #666;
  text-align: center;
}
.popupBox p:nth-child(1) {
  height: 1.3rem;
  line-height: 1.3rem;
  border-bottom: 1px solid #ddd;
}
.popupBox p:nth-child(2) {
  height: 1.3rem;
  line-height: 1.3rem;
}
.popupBox {
  width: 100%;
}
.record {
  height: 83%;
  width: 100%;
  z-index: 8888;
  background: rgba(40, 40, 41, 0.6);
  opacity: 0.7;
  position: fixed;
  bottom: 0;
}
.record p {
  width: 100%;
  text-align: center;
  color: #fff;
  margin: 40% auto;
}
.statuid {
  margin-left: 240px !important;
}
.first span:nth-child(2) {
  margin-left: 10px;
}
.status {
  margin-right: 10px;
}
.four {
  width: 37px !important;
  display: inline-block;
  height: 46px !important;
}
.three {
  width: 37px !important;
  height: 37px !important;
  display: inline-block;
}
.flexBoxBG {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
}
.csip {
  /* animation:mymove3 0.25s infinite;
      -webkit-animation:mymove3 0.25s 1; /*Safari and Chrome*/
  /* opacity: 1; */
  display: block;
}
/* @keyframes mymove3{
      from {opacity:0;}
      to {opacity:1;}
    }
      
    @-webkit-keyframes mymove3{
      from {opacity:0;}
      to {opacity:1;}
    } */
.uncsip {
  /* animation:mymove4 0.25s infinite;
      -webkit-animation:mymove4 0.25s 1; /*Safari and Chrome*/
  /* opacity: 0;  */
  display: none;
}
.lastpos {
  font-size: 30px;
}
.lone {
  border-bottom: none !important;
}
.load {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  bottom: 0;
  background: rgba(108, 108, 108, 0.3);
  z-index: 9999;
}
.load img {
  width: 32px;
  height: 32px;
  margin: 40% auto;
  z-index: 999;
  margin-left: 50%;
  margin-top: 40%;
}
</style>
